<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<title></title>
		<style>
			@charset "utf-8";
			/* CSS Document */
			
			.loading-all {
				width: 100%;
				height: 100%;
				background: #fff;
				z-index: 999;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-box-pack: center;
				-webkit-box-align: center;
				position: absolute;
				text-align: center;
			}
			
			.loading-all i {
				display: block;
				background-size: 166px auto;
				width: 100px;
				height: 100px;
				/* margin-bottom: 20px; */
			}
			
			.loading-all i.la-loading {
				background-image: url(img/loading_main.png);
				background-size: 166px auto;
				position: relative;
				/* margin-bottom:10px; */
			}
			
			.loading-all i.la-loading .loading {
				background-image: none;
				position: absolute;
				bottom: 0px;
				left: 0px;
				padding: 0px;
				margin: 0px;
				-webkit-transform: translate(0, 0, 0);
				-webkit-transform: translate3d(0, 0, 0);
				overflow: hidden;
				height: 0px;
				-webkit-animation: loading 1.5s linear infinite;
			}
			
			.loading-all i.la-loading .loading:after {
				background-image: url(img/loading_main.png);
				content: "";
				display: block;
				width: 100px;
				height: 100px;
				background-size: 166px auto;
				background-position: 0px -100px;
				position: absolute;
				bottom: 0px;
				left: 0px;
				padding: 0px;
				margin: 0px;
			}
			
			.loading-all p {
				font-size: 16px;
				line-height: 20px;
				color: #ababab;
				text-align: center;
			}
			
			@-webkit-keyframes loading {
				0% {
					-webkit-transform: translate(0, 0, 0);
					-webkit-transform: translate3d(0, 0, 0);
					height: 0px;
				}
				90% {
					-webkit-transform: translate(0, 0, 0);
					-webkit-transform: translate3d(0, 0, 0);
					height: 100px;
				}
				100% {
					-webkit-transform: translate(0, 0, 0);
					-webkit-transform: translate3d(0, 0, 0);
					height: 100px;
				}
			}
			
			.loading-text {
				position: relative;
				width: 100%;
			}
			
			.loading-text span {
				background-image: url(img/loading_main.png);
				display: inline-block;
				background-repeat: no-repeat;
				background-size: 166px auto;
				height: 15px;
				text-align: center;
			}
			
			.loading-text .step1 span {
				background-position: 0 -200px;
				width: 106px;
			}
			
			.loading-text .step2 span {
				background-position: 0 -223px;
				width: 116px;
			}
			
			.loading-text .step3 span {
				background-position: 0 -246px;
				width: 166px;
			}
			
			.loading-text .step {
				opacity: 0;
				width: 100%;
				position: absolute;
				-webkit-transition: all 0.5s ease-out;
			}
			
			.loading-text .step.default-show {
				opacity: 1;
			}
			
			.loading-text .step.show {
				-webkit-animation: show 2000ms ease-in-out forwards;
			}
			
			@-webkit-keyframes show {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
		</style>
	</head>

	<body>
		<section class="loading-all">
			<i class="la-loading">
            <i class="loading"></i>
			</i>
			<div class="loading-text">
				<div class="step step1">
					<span></span>
				</div>
				<div class="step step2">
					<span></span>
				</div>
				<div class="step step3 show">
					<span></span>
				</div>
			</div>
		</section>
	</body>

</html>